.handle-overflow {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.contact-list {
	margin: 16px 0 0;
}

.contact-list__action {
	margin-block-start: 16px;
	display: flex;
	gap: 8px;
}

.contact-list__action-button.button {
	border-radius: 20px; /* stylelint-disable-line scales/radii */
	color: var(--studio-gray-80);
	display: flex;
	align-items: center;
	border-color: var(--studio-gray-80);
	padding: 4px 8px;

	&:disabled {
		background-color: var(--studio-white);
		border-color: var(--studio-gray-5);

		svg {
			fill: var(--studio-gray-5);
		}
	}
}

.contact-list-item {
	margin: 0;
	height: 60px;
	display: flex;
	align-items: center;
	padding: 16px;
}

.contact-list-item__content-container {
	display: flex;
	align-items: center;
	gap: 4px;
	width: 100%;

	.contact-list-item__content {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		flex: 1;
		max-width: calc(100% - 30px);
	}

	.contact-list-item__verification-status {
		margin-inline-end: 24px;

		.badge {
			font-size: 0.75rem;
		}
	}

	.contact-list-item__action-icon {
		position: absolute;
		right: 8px;
		display: flex;
		background: rgba(255, 255, 255, 0.9);
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
		border-radius: 2px;
		padding: 4px;
	}
}

.contact-list-item__heading {
	@extend .handle-overflow;
	font-weight: 500;
	font-size: 0.875rem;
	line-height: 18px;
	color: var(--studio-gray-100);
}

.contact-list-item__sub-heading {
	@extend .handle-overflow;
	font-weight: 400;
	font-size: 0.75rem;
	line-height: 18px;
	color: var(--studio-gray-50);
}

.contact-list__upgrade-message {
	margin-block-start: 8px;
	font-size: rem(12px);
	color: var(--studio-gray-50);
}

.contact-list-item__popover-menu {
	z-index: 100001;
}
